<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="lib/jquery/jquery.1.10.2.min.js"></script>
    <script src="lib/website/function.js"></script>
    <script src="lib/website/interface.js"></script>
    <script type="text/javascript">
    $("#form").find('.btn').click(function(event) {
        alert($('#form').serialize()) ;
    });
    </script>
    <style type="text/css">
    .bg {
        background-image: url(./img/dc-bg.png);
        background-size: 100% 100%;
        height: 2700px;
    }

    .title {
        color: #fff;
        font-weight: 800;
        font-size: 52px;
        letter-spacing: 3px;
        margin-top: 216px;
    }

    .basic {
        background-color: #FFFFF;
        height: 276px;
        width: 64%;
        top: 815px;
        left: 18.5%;
        position: absolute;
        padding: 30px 30px;
    }

    .content {
        background-color: #FFFFF;
        height: 1105px;
        width: 64%;
        top: 1258px;
        left: 19%;
        position: absolute;
        padding: 30px 30px;
    }

    .form-group .btn {
        margin-top: 100px;
    }
    </style>
</head>

<body>
    <div class="container-fluid bg">
        <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <h1 class="title text-center">2018年XX市公众满意度调查问卷</h1>
            </div>
        </div>
        <form action="" class="form" id="form">
            <div class="row basic">
                <div class="form-group">
                    <div class="question">
                        1.您的年龄
                    </div>
                    <div class="radio">
                        <label><input name='age' type="radio" class="sort" value="A"> 20岁以下</label>&nbsp;&nbsp;
                        <label><input name='age' type="radio" class="sort" value="B"> 20-40</label>&nbsp;&nbsp;
                        <label><input name='age' type="radio" class="sort" value="C"> 40-50</label>&nbsp;&nbsp;
                        <label><input name='age' type="radio" class="sort" value="D"> 50-60 60以上</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        2.您的职业
                    </div>
                    <div class="radio">
                        <label><input name='profession' type="radio" class="sort" value="A"> 学生</label>&nbsp;&nbsp;
                        <label><input name='profession' type="radio" class="sort" value="B"> 工人</label>&nbsp;&nbsp;
                        <label><input name='profession' type="radio" class="sort" value="C"> 农民</label>&nbsp;&nbsp;
                        <label><input name='profession' type="radio" class="sort" value="D"> 干部</label>&nbsp;&nbsp;
                    </div>
                </div>
            </div>
            <div class="row content">
                <div class="form-group">
                    <div class="question">
                        1.您对居住的环境满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="environment" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="environment" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="environment" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="environment" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        2.您对本地空气状况满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="airQuality" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="airQuality" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="airQuality" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="airQuality" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        3.您对本地河流、湖泊水质状况满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="river" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="river" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="river" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="river" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        4.您对本地环境污染整治成果满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="pTreatment" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="pTreatment" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="pTreatment" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="pTreatment" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        5.您对本地噪声满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="noise" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="noise" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="noise" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="noise" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        6.您对本地环境绿化满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="afforestation" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="afforestation" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="afforestation" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="afforestation" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        7.您认为本地空气质量改善效果怎样吗？
                    </div>
                    <div class="radio">
                        <label><input name="airRegime" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="airRegime" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="airRegime" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="airRegime" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        8.您对本地污水、生活垃圾处理满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="greenSewage" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="greenSewage" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="greenSewage" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="greenSewage" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        9.您对本地环保部门工作满意吗？
                    </div>
                    <div class="radio">
                        <label><input name="environmental" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="environmental" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="environmental" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="environmental" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <div class="question">
                        10.您觉得当地政府在环保方面做的怎么样？
                    </div>
                    <div class="radio">
                        <label><input name="protection" type="radio" class="sort" value="A"> 满意</label>&nbsp;&nbsp;
                        <label><input name="protection" type="radio" class="sort" value="B"> 比较满意</label>&nbsp;&nbsp;
                        <label><input name="protection" type="radio" class="sort" value="C"> 一般</label>&nbsp;&nbsp;
                        <label><input name="protection" type="radio" class="sort" value="D"> 不满意</label>&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group">
                    <a id="submit-survey" class="btn btn-success btn-block">提交</a>
                </div>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript">
    $('#submit-survey').click(function(event) {
        var params = $("#form").serialize();
        alert(params);

    });
</script>

</html>